<template>
  <div class="common-layout">

    <el-container>

      <!--      左侧部分-->
      <el-aside :width="isCollapse ? '64px' : '260px'" style="background-color: #304155">
        <div class="menuTitle">
          <a style="color:#FFFFFF; text-decoration: none" href="/dashboard"> 爱购网管理系统</a>
        </div>
        <el-menu
            active-text-color="#ffd04b"
            background-color="#304155"
            class="el-menu-vertical-demo"
            :default-active="currentRouterPath"
            text-color="#d0dff4"
            style="border-right: solid 0px;"
            :collapse="isCollapse"
            :collapse-transition="false"
            :router="true"
            :unique-opened="false">

          <!--          市场活动-->
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <Calendar/>
              </el-icon>
              <span>商品管理</span>
            </template>
            <el-menu-item index="/dashboard/product">
              <el-icon>
                <Calendar/>
              </el-icon>
              商品列表管理
            </el-menu-item>
            <el-menu-item index="/dashboard/productType">
              <el-icon>
                <Calendar/>
              </el-icon>
              商品类型管理
            </el-menu-item>
            <el-menu-item index="/dashboard/sales">
              <el-icon>
                <Calendar/>
              </el-icon>
              商品销售管理
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="2">
            <template #title>
              <el-icon>
                <Calendar/>
              </el-icon>
              <span>品牌管理</span>
            </template>
            <el-menu-item index="/dashboard/brand">
              <el-icon>
                <Calendar/>
              </el-icon>
              品牌管理
            </el-menu-item>
          </el-sub-menu>


          <el-sub-menu index="3">
            <template #title>
              <el-icon>
                <Calendar/>
              </el-icon>
              <span>订单管理</span>
            </template>
            <el-menu-item index="/dashboard/order">
              <el-icon>
                <Calendar/>
              </el-icon>
              订单管理
            </el-menu-item>
            <el-menu-item index="/dashboard/orderProduct">
              <el-icon>
                <Calendar/>
              </el-icon>
              订单商品表
            </el-menu-item>

            <el-menu-item index="/dashboard/receivingAddress">
              <el-icon>
                <Calendar/>
              </el-icon>
              收货地址表
            </el-menu-item>
          </el-sub-menu>


          <el-sub-menu index="4">
            <template #title>
              <el-icon>
                <Calendar/>
              </el-icon>
              <span>购物车管理</span>
            </template>

            <el-menu-item index="/dashboard/shopCart">
              <el-icon>
                <Calendar/>
              </el-icon>
              购物车管理
            </el-menu-item>
            <el-menu-item index="/dashboard/shopCartProduct">
              <el-icon>
                <LocationInformation/>
              </el-icon>
              购物车商品表
            </el-menu-item>
          </el-sub-menu>


          <el-sub-menu index="5">
            <template #title>
              <el-icon>
                <el-icon>
                  <PieChart/>
                </el-icon>
              </el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/dashboard/user">
              <el-icon>
                <LocationInformation/>
              </el-icon>
              用户管理
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="6">
            <template #title>
              <el-icon>
                <el-icon>
                  <PieChart/>
                </el-icon>
              </el-icon>
              <span>图片上传</span>
            </template>
            <el-menu-item index="/dashboard/upload">
              <el-icon>
                <LocationInformation/>
              </el-icon>
              测试
            </el-menu-item>
            <el-menu-item index="/dashboard/carouselFigure">
              <el-icon>
                <LocationInformation/>
              </el-icon>
              轮播表
            </el-menu-item>
            <el-menu-item index="/dashboard/searchHistory">
              <el-icon>
                <LocationInformation/>
              </el-icon>
              搜索历史表
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>


      <el-container class="right">
        <el-header style="background-color: #ffffff">
          <el-icon class="showIc" style="margin-top: 0" @click="showMenu">
            <Fold/>
          </el-icon>
          <!--          <el-avatar style="margin-left: 1630px;margin-top: 2px" shape="circle" :size="30" :src="url"/>-->

          <el-dropdown class="show" :hide-on-click="false">
                <span class="el-dropdown-link" style="color: #6e706f">
                  {{ name }}<el-icon class="el-icon--right"><arrow-down/></el-icon>
                </span>

            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="myProfile">我的资料</el-dropdown-item>
                <el-dropdown-item>修改密码</el-dropdown-item>
                <el-dropdown-item @click="signUp">用户注册</el-dropdown-item>
                <el-dropdown-item divided @click="logout">安全退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>

          </el-dropdown>
        </el-header>

        <!--        中部-->
        <el-main>
          <transition name="fade" mode="out-in">
            <router-view v-if="isRouterAlive"/>
          </transition>

        </el-main>
        <!--        底部-->
        <el-footer>版权所有:第一小组 &nbsp; &nbsp; Copyright © 2023 - 2024 &nbsp; &nbsp;爱购网后台管理系统（开发版）</el-footer>
      </el-container>
    </el-container>
  </div>

</template>


<script>
import {getTokenKey, messageConfirm, removeToken} from "../util/util.js";
import {ElNotification} from "element-plus";
import {h} from "vue";

export default {
  name: "DashboardView",

  data() {
    return {
      //控制左侧菜单左右的展开和折叠，true是折叠，false是展开
      isCollapse: false,
      //初始化登录用户对象
      user: {},
      name: '',
      //控制仪表盘页面右侧内容体是否显示，true显示，false不显示
      isRouterAlive: true,
      //当前访问的路由路径
      currentRouterPath: '',
      url: "https://k.sinaimg.cn/n/sinakd20120/96/w2048h2048/20230723/e38a-ef9073a911d8af9f9179115a8f580d5e.jpg/w700d1q75cms.jpg"
    }
  },
  provide() {
    return {
      reload: () => {
        this.isRouterAlive = false;
        this.$nextTick(function () {
          this.isRouterAlive = true;
        })
      },
    }
  },
  mounted() {
    // this.loadUser();
    this.loadLoginUser();
    this.open1();
    this.loadCurrentRouterPath();
  },
  methods: {

    // loadUser() {
    //   if (localStorage.getItem(getTokenKey())===null){
    //     window.location.href = "/";  // 路由到登录页面
    //   }
    // },
    showMenu() {
      this.isCollapse = !this.isCollapse;
    },
    loadLoginUser() {
      // doGet("/api/login/info", {}).then((resp) => {
      //   this.user = resp.data.data;
      //
      // })
      this.name = localStorage.getItem("user")
    },
    // logout() {
    //
    //   messageConfirm("是否退出登录？").then(() => {
    //     removeToken();
    //     window.location.href = "/";
    //   })
    // },
    // myProfile() {
    //   window.location.href = "/myProfile"
    // },
    // signUp() {
    //   window.location.href = "/signUp"
    // },
    open1() {
      console.log(this.user.name)
      ElNotification({
        title: "管理员",
        message: h('i', {style: 'color: teal'}, '欢迎回来'),
        duration: 1500,
        showClose: false
      })
    },
    loadCurrentRouterPath() {
      let path = this.$route.path; //   /dashboard/activity/add
      let arr = path.split("/"); //   [  ,dashboard, activity, add]
      if (arr.length > 3) {
        this.currentRouterPath = "/" + arr[1] + "/" + arr[2];
      } else {
        this.currentRouterPath = path;
      }
    },
    logout() {
      messageConfirm("是否退出登录？").then(() => {
        removeToken();
        window.location.href = "/";
      })
    },

  }

}
</script>


<style scoped>


/*右部分*/
.right {
  height: calc(100vh);
}

/*右侧 头*/
.el-header {
  background-color: #545c64;

  height: 35px;
  line-height: 35px;
}

/*右侧中*/
.el-main {

  background-color: #eff0f4;

}

:focus-visible {
  outline: -webkit-focus-ring-color auto 0px;
}

/*右侧底*/
.el-footer {

  height: 30px;
  line-height: 30px;
  text-align: center;
}

.menuTitle {
  height: 35px;
  line-height: 35px;
  color: #f9f9f9;
  text-align: center;
  /*background-color:#545c64;*/
}

.show {
  cursor: pointer;
  margin-top: 9px;

}

.el-dropdown {
  float: right;
  /*line-height: 35px;*/


}

.el-dropdown-link {
  color: #f9f9f9;
}

/*!* 定义过渡样式 *!*/
/*.fade-enter-active, .fade-leave-active {*/
/*  transition: opacity .5s;*/
/*}*/
/*.fade-enter, .fade-leave-to !* .fade-leave-active for <=2.1.8 *! {*/
/*  opacity: 0;*/
/*}*/
</style>